<template>
  <div>
    <Header :title="'返回'" :subTitle="'运维'" :hasBackPath="true" @headerBack="$router.back()"></Header>
    <a-card :bordered="false">
      <!-- <h3>运维</h3> -->
      <div>
        <h3 class="subtitle" style="margin-top: 0;">参活用户查询</h3>
        <div>用于查询用户是否参与抽奖活动和剩余抽奖机会数</div>
        <a-form layout="inline" style="margin: 20px 0;">
          <a-form-item label="用户品牌卡卡号" style="vertical-align: middle;">
            <a-input allowClear v-model.trim="cardNo" placeholder="输入用户品牌卡卡号查询" />
          </a-form-item>
          <a-button style="vertical-align: middle;" type="primary" @click="handleQueryUser">查询</a-button>
        </a-form>
        <div style="color: red;">结果：{{result}}</div>
        <!-- <div style="color: green;">结果：用户可参与本次活动（剩余抽奖机会：3次）</div> -->
        <a-divider />
      </div>

      <div>
        <h3 class="subtitle" >参活店仓查询</h3>
        <div>用于查询店仓是否参与抽奖活动</div>
        <template v-if="luckyDrawStoreList.length">
          <MemberPromotionsFilter style="margin: 20px 0;" ref="filter" :type="3" @onSearch="onSearch"></MemberPromotionsFilter>
          <a-table :pagination="pagination" bordered :columns="columns" :data-source="luckyDrawStoreList"
          :rowKey="record => record.id" size="middle" @change="handleDrawStoreChange">
          </a-table>
        </template>
        <div v-else style="color: #70B603;margin-top: 10px;">全部店仓均参与本次活动</div>
        <a-divider />
      </div>

      <div>
        <h3 class="subtitle">奖品剩余库存查询</h3>
        <div style="margin-bottom: 20px;">用户查询抽奖活动中奖品剩余量</div>
        <a-table :columns="stockColumns" :pagination="false" bordered :data-source="stockList"
              :rowKey="(record, index) => index" size="middle">
          <span slot="awardType" slot-scope="text, record, index">
            <!-- 奖品类型(1积分,2优惠券,3实物,0谢谢参与) -->
            <span v-if="record.awardType == 0">谢谢参与</span>
            <span v-if="record.awardType == 1">积分</span>
            <span v-if="record.awardType == 2">优惠券</span>
            <span v-if="record.awardType == 3">实物</span>
          </span>
          <span slot="associationId" slot-scope="text, record, index">
            <span v-if="record.awardType == 2">{{record.ruleId || '/'}}</span>
            <span v-else-if="record.awardType == 3">{{record.productSpu || '/'}}</span>
            <span v-else>/</span>
          </span>
      </a-table>
      </div>
    </a-card>
  </div>
</template>
<script>
import { getTakePartInUserInfoByCardNo, pageStore, getLuckyDrawDetailByLuckyId } from '@/api/marketingCenter/luckyDraw.js'
import MemberPromotionsFilter from '../../components/memberPromotionsFilter'
import Header from '@/views/box/components/layouts/Header'
const columns = [
  {
    title: '店仓编号',
    align: 'center',
    dataIndex: 'storeCode'
  },
  {
    title: '店仓名称',
    align: 'center',
    dataIndex: 'storeName'
  }
]

const stockColumns = [
  {
    title: '奖品类型',
    align: 'center',
    scopedSlots: { customRender: 'awardType' }
  },
  {
    title: '奖品名称',
    align: 'center',
    dataIndex: 'awardName'
  },
  {
    title: '奖品关联ID',
    align: 'center',
    scopedSlots: { customRender: 'associationId' }
  },
  {
    title: '奖品剩余库存',
    align: 'center',
    dataIndex: 'awardCount'
  }
]

export default {
  components: {
    MemberPromotionsFilter,
    Header
  },
  data() {
    return {
      result: '---查询结果---',
      cardNo: '',
      columns,
      stockColumns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      
      luckyId: this.$route.params.id,
      stockList: [
      ],
      queryParam: {
      },
      luckyDrawStoreList: []
      
    }
  },
  activated() {
  },
  created() {
    this.getLuckyDrawDetailByLuck()
    this.getLuckyDrawStoreList()
  },
  computed: {},
  mounted() {},
  watch: {
  },
  methods: {
    getLuckyDrawStoreList() {
      const data = {
        ...this.queryParam,
        luckyId: this.$route.params.id
      }
      pageStore(data).then(res => {
        if (res.code === 200) {
          this.luckyDrawStoreList = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    handleDrawStoreChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      // this.getluckyDrawStoreList()
    },

    // 查询用户
    handleQueryUser() {
      if (!this.cardNo) {
        this.$message.info('输入用户集团卡卡号查询！')
        return
      }
      const data = {
        cardNo: this.cardNo,
        luckyId: this.luckyId
      }
      getTakePartInUserInfoByCardNo(data).then(res => {
        if (res.code === 200) {
          this.result = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 奖品剩余库存查询
    getLuckyDrawDetailByLuck() {
      const data = {
        luckyId: this.luckyId
      }
      getLuckyDrawDetailByLuckyId(data).then(res => {
        if (res.code === 200) {
          this.stockList = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.getLuckyDrawStoreList()
    }
  }
}
</script>
<style lang="less" scoped>
.subtitle{
  margin-top: 30px;
  
}
</style>
